<template>
	<view class="flex-col page">
		<view class="flex-col section_1">
			<!--  <view class="justify-center group">
        <image
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621783633159.png"
          class="image" @click="go('/pages/my/order/order')"
        />
        <text class="text">订单详情</text>
      </view> -->

			<view class="justify-between group_1" v-if="ordersStatus ==1">
				<text class="text_1">订单待付款</text>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836722406945651.png"
					class="image_1" />
			</view>
			<view class="justify-between group_1" v-if="ordersStatus ==3 || ordersStatus ==2">
				<text class="text_1">
					订单待反馈
					<view class="awaitBack">
						<text>等待询价员进行反馈</text>
					</view>
				</text>

				<!-- <image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836722406945651.png"
					class="image_1" /> -->
				<image src="http://107.148.1.63/user/fankui.png" class="image_1" />
			</view>

			<view class="justify-between group_1" v-if="ordersStatus ==4">
				<text class="text_1">订单待评价</text>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836722406945651.png"
					class="image_1" />
			</view>
			<view class="justify-between group_1" v-if="ordersStatus ==5">
				<text class="text_1">订单已完成</text>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836722406945651.png"
					class="image_1" />
			</view>
		</view>
		<view class="flex-col section_2" v-if="ordersStatus ==5 || ordersStatus ==4">
			<view class="" @click="tofankui">查看咨询员反馈信息</view>
		</view>
		<view class="flex-col section_4" :class="ordersStatus ==4?'active':''">
			<view class="">
				<template v-for="(item,i) in this.listinfo.materaleDaos">
					<view class="top20" :key="i">
						<text class="text_999">{{item.materaleName}}</text>
						<template v-for="(demo,j) in item.detailedLists">
							<view v-if="j<limit" class="flex-row" style="margin-top: 50rpx;" :key="j">
								<!-- 如果有图片 -->
								<view class="group_999" v-if="demo.detailedPicture">
									<image :src="demo.detailedPicture" />
								</view>
								<!-- 没有图片 -->
								<view class="group_999" v-else>
									<image
										src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826684196968135.png" />
								</view>
								<!-- 以下勿动 -->
								<view class="flex-col text_333" v-if="demo.choiceId == 0">
									<text style="font-weight: 600;">{{demo.productName}}</text>
									<text>备注：{{demo.remarks ?  demo.remarks : '无' }}</text>
								</view>
								<view class="flex-col text_857" v-if="demo.choiceId == 1">
									<text style="font-weight: 600; fontSize:15px">{{demo.productName}}</text>
									<text
										class="materialModelId">型号：{{demo.materialModelId ?  demo.materialModelId : '无' }}</text>
									<text
										class="specificationsId">规格：{{demo.specificationsId ?  demo.specificationsId : '无' }}</text>
								</view>
							</view>
						</template>
					</view>
				</template>
				<view class="u-flex u-row-center u-col-center" @click="toggle" v-if="pageNumber">
					<view class="u-flex u-row-center u-col-center" v-if="limit==2">
						<text class="more_222">查看更多</text>
						<u-icon name="arrow-down" size="18"></u-icon>
					</view>
					<view class="u-flex u-row-center u-col-center" v-if="limit>2">
						<text class="more_222">收起</text>
						<u-icon name="arrow-up" size="18"></u-icon>
					</view>

				</view>

			</view>
			<view class="flex-row justify-between group_333" style="margin-top: 30rpx;">
				<text class="text_21">数量</text>
				<text class="text_22">{{listinfo.number}}</text>
			</view>
			<view class="flex-row justify-between group_333">
				<text class="text_21">金额</text>
				<text class="text_22">￥{{listinfo.payableMoney}}.00</text>
			</view>

			<view class="flex-row justify-between group_333" style="border-bottom: 1px solid #eee;">
				<text class="text_21">优惠券</text>
				<text class="text_22" v-if="listinfo.couponsMoney != null">-￥{{listinfo.couponsMoney}}</text>
				<text class="text_22" v-else>-￥0.00</text>
			</view>
			<view class="flex-row justify-between realPay" v-if="ordersStatus ==3 || ordersStatus ==2">
				<text class="text_21">实付款:</text>
				<text class="text_pay">￥{{listinfo.payableMoney}}.00</text>
			</view>
		</view>
		<view class="flex-col section_5">
			<view class="flex-row group_17">
				<view class="section_3 view_2">
					<!--*-->
				</view>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621826750433.png"
					class="image_2" />
			</view>
			<view class="flex-col group_18">
				<view class="flex-row justify-between">
					<view class="flex-row">
						<text class="text_21">订单编号</text>
						<text class="text_22">{{listinfo.ordersNumber}}</text>
					</view>
					<text class="text_23" @click="copy(listinfo.ordersNumber)">复制</text>
				</view>
				<view class="flex-row group_20">
					<text class="text_24">下单时间</text>
					<text class="text_25">{{listinfo.ordersTime}}</text>
				</view>
			</view>
			<!--   <view class="flex-row group_21">
        <text class="text_26">联系方式</text>
        <text class="text_27">13712345678</text>
      </view> -->
			<view class="flex-row group_22" v-if="ordersStatus != 1">
				<text class="text_28">付款金额</text>
				<text class="text_29">￥{{listinfo.payableMoney}}.00</text>
			</view>
			<view class="flex-row group_23" v-if="ordersStatus != 1 && listinfo.payType">
				<text class="text_30">支付方式</text>
				<text class="text_31" v-if="listinfo.payType ==1">微信支付</text>
				<text class="text_31" v-if="listinfo.payType ==2">支付宝支付</text>
			</view>
			<view class="flex-row group_24" v-if="ordersStatus != 1 && listinfo.payTime">
				<text class="text_32">支付时间</text>
				<text class="text_33">{{listinfo.payTime}}</text>
			</view>
		</view>
		<view class="justify-between section_6" v-if="ordersStatus == 3">
			<view class="flex-row group_25" @click="go('/pages/my/message/kefu')">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
					class="image_3" />
				<text class="text_34">联系客服</text>
			</view>

		</view>
		<view class="justify-between section_6" v-if="ordersStatus == 4">
			<view class="flex-row group_25">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
					class="image_3" />
				<text class="text_34">联系客服</text>
			</view>
			<view class="flex-col items-center text-wrapper_2"
				@click="go('/pages/my/evaluate/evaluate?ordersId='+ordersId)"><text class="text_37">评价</text></view>
		</view>
		<!-- <image
			src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621826750433.png"
			style="width: 50rpx; height: 50rpx;" /> -->
		<!-- <view></view> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				limit: 2,
				pageNumber: false,
				listarr: [{
					name: '瓷砖'
				}, {
					name: '门板'
				}],
				listarrT: [{
						url: 'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1659546000&t=e45aceda736e37022247ba17a8e74f2b'
					},
					{
						url: 'https://img1.baidu.com/it/u=3217543765,3223180824&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1659546000&t=435ca89ef378c1ac2eca3900c578fffd'
					}
				],
				listinfo: '',
				ordersStatus: ''
			};
		},
		onPullDownRefresh() {

			this.getlist();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(option) {
			this.ordersId = option.ordersId;

			this.getlist()
		},
		methods: {

			toggle() {
				if (this.limit == 1000) {
					this.limit = 2;
				} else {
					this.limit = 1000
				}

			},
			tofankui() {
				this.go('/pages/my/order/feedbackXJY?ordersId=' + this.ordersId)
			},
			copy(number) {

				uni.setClipboardData({
					data: number,
					success: (result) => {
						this.$u.toast('复制成功');
					},
					fail: (error) => {
						this.$u.toast('网络出错');
					}
				})
			},
			getlist() {
				this.$http('oteherL.getorderid', {
					ordersId: this.ordersId
				}).then(res => {

					if (res.code == 200) {

						this.listinfo = res.data;
						this.ordersStatus = res.data.ordersStatus
						console.log(this.listinfo.materaleDaos);
						this.listinfo.materaleDaos.forEach(item => {
							console.log('稍等', item);
							if (item.detailedLists.length > 2) {
								this.pageNumber = true
							}
						})
					} else {

					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.realPay {
		padding-top: 24rpx;
		justify-content: flex-end;
	}

	.text_pay {

		margin-left: 6rpx;
		color: red;
		font-size: 28rpx;
	}

	.awaitBack {
		padding-top: 10rpx;
		color: #FFF;
		font-size: 24rpx;
	}

	.materialModelId {
		padding-top: 20rpx;
		font-size: 28rpx;
		color: #999;
	}

	.specificationsId {
		padding-top: 20rpx;
		font-size: 28rpx;
		color: #999;
	}

	.text_857 {

		margin-left: 20rpx;
	}

	.flex-row {
		align-items: center;
	}

	/deep/ uni-image>div,
	uni-image>img {
		border-radius: 24rpx !important;
	}

	.top20 {
		margin-top: 40rpx;
	}

	.active {
		margin-top: -100rpx !important;
	}

	.more_222 {
		text-align: center;

		height: 80rpx;
		line-height: 80rpx;

		color: #999;
		font-size: 24rpx;
	}

	.text_999 {
		color: #999;
		font-size: 30rpx;
	}

	.text_333 {
		margin-left: 20rpx;
	}

	.text_333 uni-text {}

	.text_333 text:first-child {
		font-size: 30rpx;
		color: #333;
	}

	.text_333 text:last-child {
		font-size: 28rpx;
		color: #999;
		padding-top: 60rpx;
	}

	.group_999 {
		width: 170rpx;
		height: 170rpx;
		// box-shadow: 0rpx 0rpx 2rpx #999;
		border-radius: 40rpx;

	}

	

	.group_999 image {
		width: 100%;
		height: 100%;
	
	}

	.group_333 {
		height: 60rpx;
		line-height: 60rpx;
	}



	.section_3 {
		margin-top: 6rpx;
		background-color: #1d6aff;
		border-radius: 3rpx;
		width: 6rpx;
		height: 28rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		height: 100vh;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 55rpx 32rpx 143rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621628592893.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_2 {
		margin: -109rpx 24rpx 0;
		background-color: #ffffff;
		border-radius: 16rpx;
		position: relative;
	}

	.section_2 view {
		width: 100%;
		text-align: center;
		color: #2865D3;
		font-weight: 600;
		padding: 43rpx 0;
		background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 28.95%, #e0eafd 100%, #e0eafd 100%);
		border-radius: 16rpx;
	}

	.section_4 {
		margin: -100rpx 24rpx 0 24rpx;
		background-color: #ffffff;
		padding: 0rpx 30rpx 24rpx;
		border-radius: 16rpx;
	}

	.section_5 {
		margin: 20rpx 24rpx 0;
		padding: 0 24rpx 34rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 90rpx;
	}

	.section_6 {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		margin-top: 32rpx;
		padding: 18rpx 24rpx 18rpx 34rpx;
		background-color: #ffffff;
		/* box-shadow: 0px -1rpx 0px 0px #eeeeee; */
	}

	.group {
		padding-bottom: 4rpx;
		position: relative;
	}

	.group_1 {
		margin-top: 12rpx;
	}

	.group_3 {
		margin-top: 38rpx;
	}

	.group_4 {
		margin-top: 31rpx;
	}

	.group_5 {
		margin-top: 25rpx;
	}

	.group_6 {
		padding: 29rpx 4rpx 32rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_17 {
		padding: 28rpx 0 32rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_18 {
		margin-top: 29rpx;
	}

	.group_21 {
		margin-top: 31rpx;
	}

	.group_22 {
		margin-top: 31rpx;
	}

	.group_23 {
		margin-top: 31rpx;
	}

	.group_24 {
		margin-top: 37rpx;
	}

	.image_3 {
		width: 36rpx;
		height: 35rpx;
	}

	.text_34 {
		margin-left: 18rpx;
		margin-bottom: 8.5rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 19rpx;
		height: 36rpx;
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.text_1 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_1 {
		margin-right: 33rpx;
		margin-top: 5rpx;
		filter: drop-shadow(0px 3rpx 3rpx #1a60e266);
		width: 70rpx;
		height: 80rpx;
	}

	.text_2 {
		margin-left: 18rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_3 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_4 {
		margin-right: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		margin-bottom: 6rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_6 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_9 {
		margin-left: 18rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_8 {
		padding: 23rpx 0 35rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.view_2 {
		// margin-top: 13rpx;
	}

	.image_2 {
		margin-top: 4rpx;
		margin-left: 17rpx;
		width: 132rpx;
		height: 40rpx;
	}

	.text_23 {

		display: flex;
		justify-content: flex-end;
		width: 150rpx;
		align-self: flex-end;
		color: #1c4ca8;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_20 {
		margin-top: 20rpx;
	}

	.text_26 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_27 {
		margin-left: 40rpx;
		margin-top: 6rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_28 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_29 {
		margin-left: 40rpx;
		color: #fe641a;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_30 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_31 {
		margin-left: 40rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_32 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_33 {
		margin-left: 40rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_10 {
		margin-top: 39rpx;
	}

	.group_12 {
		padding: 30rpx 0 35rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_15 {
		padding: 26rpx 0 31rpx;
	}

	.text_21 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_22 {
		margin-left: 40rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_24 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_25 {
		margin-left: 40rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_10 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_11 {
		margin-right: 10rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_12 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_13 {
		margin-right: 8rpx;
		color: #fe641a;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_14 {
		margin-top: 33rpx;
	}

	.text_18 {
		margin: 7rpx 16rpx 3rpx 0;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_16 {
		height: 38rpx;
	}

	.text_14 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_15 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_16 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_17 {
		margin-top: 6rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_19 {
		color: #fe641a;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_20 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text-wrapper_2 {
		padding: 14rpx 0 22rpx;
		background-color: #1d6aff;
		border-radius: 32rpx;
		width: 172rpx;
		height: 64rpx;
	}

	.text_37 {
		color: #fff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_25 {

		align-self: center;
	}
</style>
